HTML Canvas Graphics

এইচটিএমএল ক্যানভাস গ্রাফিক্স শিখুন

এইচটিএমএল ক্যানভাস গ্রাফিক্স

HTML <canvas> উপাদানটি একটি ওয়েব পেজে গ্রাফিক্স আঁকতে ব্যবহৃত হয়।

ক্যানভাসের উদাহরণ

উপরের গ্রাফিক্স <canvas> দিয়ে তৈরি করা হয়েছে। এটি চারটি উপাদান দেখায়: একটি লাল আয়তক্ষেত্র, একটি গ্রেডিয়েন্ট আয়তক্ষেত্র, একটি বহুরঙা আয়তক্ষেত্র এবং বহু রঙের পাঠ্য৷

ক্যানভাস কি?

HTML <canvas> উপাদানটি জাভাস্ক্রিপ্টের সাথে তাৎক্ষণিকভাবে গ্রাফিক্স আঁকতে ব্যবহৃত হয়।

🎨মূল ধারণা:

<ক্যানভাস> উপাদানটি গ্রাফিক্সের জন্য একটি ধারক মাত্র। গ্রাফিক্স আঁকতে আপনাকে অবশ্যই জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।

পথ আঁকুন

ক্যানভাসে পথ, বাক্স, বৃত্ত আঁকার অনেক উপায় আছে

পাঠ্য যোগ করুন

ক্যানভাসে পাঠ্য আঁকতে এবং বিন্যাস করতে পারে

ছবি ক্যানভাসে যোগ করা যায় এবং পরিবর্তন করা যায়

গ্রেডিয়েন্ট

রৈখিক এবং বৃত্তাকার গ্রেডিয়েন্ট তৈরি করা যেতে পারে

🌐ব্রাউজার সমর্থন:

ক্যানভাস সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত।

ক্যানভাসের উদাহরণ

একটি ক্যানভাস একটি HTML পৃষ্ঠার মধ্যে একটি আয়তক্ষেত্রাকার এলাকা। ডিফল্টরূপে, একটি ক্যানভাসের কোনো সীমানা নেই এবং কোনো বিষয়বস্তু নেই।

মার্কআপ এই মত দেখায়:

<canvas id="myCanvas" width="200" height="100"></canvas>
দ্রষ্টব্য:সর্বদা একটি আইডি অ্যাট্রিবিউট নির্দিষ্ট করুন (স্ক্রিপ্টে নির্দিষ্ট করতে হবে), এবং ক্যানভাসের আকার নির্ধারণ করতে প্রস্থ এবং উচ্চতা বৈশিষ্ট্যগুলি নির্দিষ্ট করুন৷ একটি বর্ডার যোগ করতে শৈলী বৈশিষ্ট্য ব্যবহার করুন।

উদাহরণ

একটি মৌলিক, ফাঁকা ক্যানভাসের উদাহরণ:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

জাভাস্ক্রিপ্ট যোগ করুন

আয়তক্ষেত্রাকার ক্যানভাস এলাকা তৈরি করার পরে, এটি আঁকার জন্য আপনাকে জাভাস্ক্রিপ্ট যোগ করতে হবে।

⚙️ধাপ:

  1. ক্যানভাস উপাদান পান: document.getElementById()
  2. খসড়া প্রসঙ্গ পান: getContext("2d")
  3. খসড়া পদ্ধতি ব্যবহার করুন

একটি লাইন আঁকুন

উদাহরণ

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
</script>

একটি বৃত্ত আঁকুন

উদাহরণ

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
</script>

লেখাটি আঁকুন

উদাহরণ

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText("Hello World", 10, 50);
</script>

স্ট্রোক পাঠ্য

উদাহরণ

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.strokeText("Hello World", 10, 50);
</script>

fillText() vs strokeText()

  • fillText():পাঠ্য পূরণ করুন (কঠিন রঙ)
  • strokeText():পাঠ্যের একটি রূপরেখা আঁকে
  • fillText():আপনি fillStyle দিয়ে রঙ সেট করতে পারেন
  • strokeText():আপনি স্ট্রোকস্টাইল দিয়ে রঙ সেট করতে পারেন

একটি রৈখিক গ্রেডিয়েন্ট আঁকুন

উদাহরণ

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

// গ্রেডিয়েন্ট তৈরি করুন
  var grd = ctx.createLinearGradient(0, 0, 200, 0);
  grd.addColorStop(0, "red");
  grd.addColorStop(1, "white");

// গ্রেডিয়েন্ট দিয়ে পূরণ করুন
  ctx.fillStyle = grd;
  ctx.fillRect(10, 10, 150, 80);
</script>

একটি বৃত্তাকার গ্রেডিয়েন্ট আঁকুন

উদাহরণ

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

// গ্রেডিয়েন্ট তৈরি করুন
  var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
  grd.addColorStop(0, "red");
  grd.addColorStop(1, "white");

// গ্রেডিয়েন্ট দিয়ে পূরণ করুন
  ctx.fillStyle = grd;
  ctx.fillRect(10, 10, 150, 80);
</script>

ছবি আঁকুন

উদাহরণ

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
</script>

এইচটিএমএল ক্যানভাস টিউটোরিয়াল

<canvas> সম্পর্কে আরও জানতে, আমাদের HTML ক্যানভাস টিউটোরিয়াল পড়ুন।

ক্যানভাস পদ্ধতি

  • fillRect() - আয়তক্ষেত্র পূরণ করুন
  • strokeRect() - আয়তক্ষেত্রের রূপরেখা
  • clearRect() - আয়তক্ষেত্রটি সাফ করুন
  • beginPath() - একটি নতুন পথ শুরু করুন
  • closePath() - পথ বন্ধ করুন

ক্যানভাস বৈশিষ্ট্য

  • fillStyle - রঙ পূরণ করুন
  • স্ট্রোক স্টাইল - স্ট্রোকের রঙ
  • লাইন প্রস্থ - লাইনের প্রস্থ
  • ফন্ট - টেক্সট ফন্ট
  • textAlign - টেক্সট সারিবদ্ধকরণ

💡ক্যানভাস প্রশিক্ষণ

নীচের ক্যানভাসে আপনি যা চেষ্টা করতে চান তা আঁকুন: